<template>
	<!-- 蒙版 -->
	<view class="paper__container__left__menu__mask" @tap="hiddenShow" v-show="show">
		
	</view>
	<!-- 操作菜单 -->
	<view class="paper__container__left__menu" v-show="show">
		<view class="paper__container__left__menu--add u-f-ac" hover-class="active" @tap="lahei">
			<text class="icon iconfont icon-clean"></text>
			<text>拉黑</text>
		</view>
		<view class="paper__container__left__menu--remove u-f-ac" hover-class="active" @tap="beizhu">
			<text class="icon iconfont icon-clean"></text>
			<text>备注</text>
		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue';
	const props = defineProps({
		show:{
			type:Boolean,
		}
	})
	const emits = defineEmits(["beizhu","lahei","update:show"])
	
	
	function setShow(){
		emits("update:show",true)
		
	}
	
	function hiddenShow(){
		emits("update:show",false)
	}
	
	function lahei(){
		emits("lahei")
		hiddenShow()
	}
	
	function beizhu(){
		emits("beizhu")
		hiddenShow()
	}
	
	
</script>

<style lang="scss" scoped>
	.paper__container__left__menu {
		position: fixed;
		top: 170upx;
		right: 0;
		background-color: #FFFFFF;
		z-index: 2000;
		width: 40%;
		box-shadow: 1upx 1upx 20upx 2upx #ccc;
		padding: 10upx 15upx;
		&--add,&--remove{
			margin: 6upx 0;
			>text {
				margin-right: 14upx;
				font-weight: 600;
				padding: 10upx 0;
				
			}
		}
		.active {
			background-color: #EEE;
		}
		&__mask{
			position: fixed;
			inset: 0;
			z-index: 999;
		}
		
	}
	
</style>
